<template>
  <div class="item cursor-pointer mb-[10px] p-[12px] mx-[12px] ">
    <a-typography>
      <a-typography-title :level="5" class="pb-[10px] text-left font-14">{{itemData.props.title}}</a-typography-title>
    </a-typography>
    <a-typography-paragraph class="text-left radio">
      <a-radio-group v-model:value="itemData.props.value" name="radioGroup">
        <a-radio :style="itemData.props.isVertical?radioStyle:''"
                 :value="r.value" :disabled="itemData.isLocked" v-for="(r,i) in itemData.props.options" :key="i">{{r.text}}</a-radio>
      </a-radio-group>
    </a-typography-paragraph>
  </div>
</template>

<script setup>
import {defineProps, reactive} from "vue";
const {itemData} = defineProps({
  itemData:{
    type:Object,
    default:{}
  }
})
const radioStyle = reactive({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
});
</script>

<style scoped>

</style>
